<template>
    <el-row class="userMan">
        <el-row type="flex" style="height: 40px;margin-bottom: 14px;position: relative">
            <el-button type="primary" @click="addUser" style="width: 100px;position: absolute;right: 0;">新增用户</el-button>
        </el-row>
        <el-table
                :data="userData"

                size="mini"
                @current-change="userChge"
                height="730"
                max-height="730"
                :header-cell-style="{background:'#e5ecf1',fontWeight: 'bold',textAlign: 'center'}"
                highlight-current-row
                border
                style="font-size: 16px;"
        >
            <el-table-column prop="name" label="姓名" min-width="100"></el-table-column>
            <el-table-column label="性别" min-width="100">
                <template slot-scope="scope">
                    {{scope.row.sex.toLowerCase() === 'male' ? '男' : ''}}{{scope.row.sex.toLowerCase() ===
                    'female' ? '女' : ''}}
                </template>
            </el-table-column>
            <el-table-column label="手机号" min-width="100">
<!--                <template slot-scope="scope">-->
<!--                    <el-row v-for="vo in scope.row.vouers">-->
<!--                        {{vo.vou === 'Mobile' ? transformation(vo.code) : '' }}-->
<!--                    </el-row>-->
<!--                </template>-->
            </el-table-column>
            <el-table-column prop="enabled" label="生效状态" min-width="50">
                <template slot-scope="scope">
                    {{ scope.row.enabled === true ? "是" : "否" }}
                </template>
            </el-table-column>
            <el-table-column width="250" fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="vouerList( scope.row )"
                               style="font-size: 16px;line-height: 10px;">凭证
                    </el-button>
                    <el-button type="text" size="mini" @click="editUser( scope.row )"
                               style="font-size: 16px;line-height: 10px;">编辑
                    </el-button>
                    <el-button type="text" size="mini" @click="allocations( scope.row )"
                               style="font-size: 16px;line-height: 10px;">分配
                    </el-button>
                    <el-button type="text" size="mini" @click="editPwd( scope.row )"
                               style="font-size: 16px;line-height: 10px;">修改密码
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" class="pagination">
            <el-pagination
                    @size-change="userSize"
                    @current-change="pgChge"
                    :current-page="userPage.currentPage"
                    :page-sizes="[10, 20, 30]"
                    :page-size="userPage.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="userPage.totalElements"
            ></el-pagination>
        </el-row>
        <transition name="el-fade-in">
            <floatingBox v-show="editBoxShow">
                <addUser v-if="addShow" slot="edit" @editState="editState"></addUser>
                <editUser v-if="editShow" slot="edit" :userUuid="uuid" @editState="editState"></editUser>
                <chgPwd v-if="pwdShow" slot="edit" :userUuid="uuid" @editState="editState"></chgPwd>
                <allocationsUser v-if="allcashShow" slot="edit" :userUuid="uuid"
                                 @editState="editState"></allocationsUser>
                <vouerList v-if="vouerShow" slot="edit" :user="user" @editState="editState"></vouerList>
            </floatingBox>
        </transition>
    </el-row>
</template>

<script>
    import {getDataForSP, writePageInfo} from "../../../utils/webUtils.js";
    import floatingBox from "../../public/floatingBox.vue";
    import editUser from "./editUser.vue";
    import addUser from "./addUser.vue";
    import chgPwd from "./chgPwd.vue";
    import allocationsUser from "./allocationsUser.vue";
    import vouerList from "../userVouer/vouerList.vue";

    export default {
        name: "userMan",
        components: {floatingBox, addUser, editUser, chgPwd, allocationsUser, vouerList},
        data() {
            return {
                formAlignLeft: 'left',
                editBoxShow: false,
                addShow: false,
                editShow: false,
                pwdShow: false,
                vouerShow: false,
                allcashShow: false,
                userSchOn: '',
                userEdit: false,
                uuid: '',
                user:{},
                userData: [],
                userPage: {
                    pageSize: 10,//每页显示条目个数
                    currentPage: 1,//当前页数
                    totalElements: 0,
                    searchData: {
                        srhData: ''
                    }
                }
            };
        },
        mounted() {
            this.queryUser();
        },
        methods: {
            editState(msg) {
                this.editBoxShow = msg;
                this.editShow = msg;
                this.addShow = msg;
                this.allcashShow = msg;
                this.pwdShow = msg;
                this.userEdit = msg;
                this.queryUser();
            },
            vouerList(val) {
                this.user = val;
                this.editBoxShow = true;
                this.vouerShow = true;
                // this.addShow = false;
                // this.editShow = false;
                // this.allcashShow = false;
                // this.pwdShow = false;
            },
            addUser() {
                this.editBoxShow = true;
                this.addShow = true;
                this.editShow = false;
                this.allcashShow = false;
                this.pwdShow = false;
            },
            editUser(val) {
                this.uuid = val.uuid;
                this.editBoxShow = true;
                this.editShow = true;
                this.userEdit = true;
            },
            editPwd(val) {
                this.uuid = val.uuid;
                this.editBoxShow = true;
                this.pwdShow = true;
            },
            allocations(val) {
                this.uuid = val.uuid;
                this.editBoxShow = true;
                this.allcashShow = true;
                this.userEdit = true;

            },
            userChge(val) {
                if (this.userEdit) {
                    this.uuid = val.uuid;
                }
            },
            transformation: function( mobile ) {
                mobile = mobile.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2");
                return mobile;
            },
            //获取所有数据
            queryUser() {
                this.axios.request({
                    method: "get",
                    url: "./kwp/kdi/user/search/findByFilter",//findByFilter findAllOrderByJob
                    params: getDataForSP(this.userPage)
                }).then(response => {
                    this.userData = response.data.content;
                    writePageInfo(this.userPage, response.data);
                }).catch(error => {
                    console.log(error);
                });
            },
            //列表分页
            userSize: function (pageSize) {
                this.userPage.pageSize = pageSize;
                if (this.userPage.currentPage === 1) {
                    if (this.userSchOn !== "") {
                        this.userSearch();
                    } else {
                        this.queryUser();
                    }
                }
                this.userPage.currentPage = 1;
            },
            pgChge(currentPage) {
                this.userPage.currentPage = currentPage;
                this.queryUser();
            }
        }
    };
</script>

<style scoped>
    .userMan {
        margin-right: 30px;
    }


</style>